<template>
	<view class="wrap-x bg-white margin-bottom-sm" >
		<view class="wrap-y" style="width: 50vw;">
			<view class="title">属性设置区</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">1.弹性子元素宽度</view>
			</view>
			<view class="margin-top-sm wrap-row margin-left">
				<view>width({{width}}%):</view>
				<slider :value="width" @changing="changeWidth" block-size="20" block-color="#ffaa00" activeColor="#ffaa00" style="width:40vw"></slider>
			</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">是否开启Flex布局：</view>
				<switch @change="changeFlex" :checked="isFlex" style="transform:scale(0.8)" color="#ffaa00"></switch>
				<!-- <img :src="isFlex?'../static/select.svg':'../static/unselect.svg'" style="height: 60rpx;width: 60rpx;"
					@click="changeFlex"></img> -->
			</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">2.弹性容器属性</view>
			</view>
			<view style="margin: 30rpx;border: 1rpx solid #999;width: 40vw;" class="wrap-y">
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;background-color: #eee;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						属性</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 33vw;">属性描述</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						flex-direction</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 33vw;">设置主轴元素排列方向</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						flex-wrap</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 33vw;">设置元素是否换行</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						justify-content</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 33vw;">设置水平的对齐方式</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						align-content</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 33vw;">设置多轴垂直方向的对齐方式</view>
				</view>
				<view class="wrap-x">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						align-items</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 33vw;">设置单轴垂直方向的对齐方式</view>
				</view>
			</view>
			<view class="wrap-x">
				<view class="wrap-y margin-left	">
					<view class="wrap-x row margin-top-sm">
						<view class="label " style="font-weight: 550;color: red;">flex-direction</view>
					</view>
					<radio-group class="margin-top-sm wrap-y" @change="changeFlexDirection">
						<radio color="#ffaa00" style="transform:scale(0.8)"  value="row" checked>row </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="row-reverse">row-reverse </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="column">column </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="column-reverse">column-reverse </radio>
					</radio-group>
				</view>
				<view class="wrap-y margin-left">
					<view class="wrap-x row margin-top-sm">
						<view class="label " style="font-weight: 550;color: red;">flex-wrap</view>
					</view>
					<radio-group class="margin-top-sm wrap-y" @change="changeflexWrap">
						<radio color="#ffaa00" style="transform:scale(0.8)" value="nowrap" checked>nowrap </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="wrap">wrap </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="wrap-reverse">wrap-reverse </radio>
					</radio-group>
				</view>
				<view class="wrap-y margin-left">
					<view class="wrap-x row margin-top-sm">
						<view class="label " style="font-weight: 550;color: red;">justify-content</view>
					</view>
					<radio-group class="margin-top-sm wrap-y" @change="changeJustify">
						<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-start" checked>flex-start </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-end">flex-end </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="center">center </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="space-between">space-between </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="space-around">space-around </radio>
					</radio-group>
				</view>

				<view class="wrap-y margin-left">
					<view class="wrap-x row margin-top-sm">
						<view class="label " style="font-weight: 550;color: red;">align-content</view>
					</view>
					<radio-group class="margin-top-sm wrap-y" @change="changeAlignContent">
						<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-start" checked>flex-start </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-end">flex-end </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="center">center </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="space-between">space-between </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="space-around">space-around </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="stretch"> stretch </radio>
					</radio-group>
				</view>
				<view class="wrap-y margin-left">
					<view class="wrap-x row margin-top-sm">
						<view class="label " style="font-weight: 550;color: red;">align-items</view>
					</view>
					<radio-group class="margin-top-sm wrap-y" @change="changeAlignItems">
						<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-start" checked>flex-start </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-end">flex-end </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="center">center </radio>
						<radio color="#ffaa00" style="transform:scale(0.8)" value="stretch"> stretch </radio>
					</radio-group>
				</view>
			</view>

			<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">3.弹性子元素属性</view>
			</view>
			<view style="margin: 30rpx;border: 1rpx solid #999;width: 40vw;" class="wrap-y">
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;background-color: #eee;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						属性</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 33vw;">属性描述</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						order</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 33vw;">子元素的排列顺序，值越小越靠前(默认0)
					</view>
				</view>
				<view class="wrap-x">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						flex</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 33vw;">子元素占的份数，可以是具体数字或百分比
					</view>
				</view>
			</view>


			<view style="margin: 30rpx;border-left: 1rpx solid #999;border-right: 1rpx solid #999;border-top: 1rpx solid #999;width: 40vw;" class="wrap-y">
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;background-color: #eee;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 13vw;border-right: 1rpx solid #999;">
						界面序号</view>
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 14vw;border-right: 1rpx solid #999;">
						order</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 13vw;">flex</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;" v-for="item,index in list">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 13vw;border-right: 1rpx solid #999;">
						{{item.index}}</view>
						<view>
					<uni-number-box 
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 14vw;border-right: 1rpx solid #999;" v-model="item.order" min="0"></uni-number-box>
						</view>
					<uni-number-box style="line-height: 50rpx;text-align: center;height: 50rpx;width: 13vw;"  v-model="item.flex" min="0"></uni-number-box>
				</view>
			</view>
			<!-- <view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">align_self：</view>
			</view>
			<radio-group class="margin-top-sm" @change="changeAlignSelf">
				<radio value="flex-start" checked>flex-start </radio>
				<radio value="flex-end">flex-end </radio>
				<radio value="center">center </radio>
			</radio-group> -->
			<!-- 		<view class="wrap-x margin-top-sm">
				<view class="wrap-x row">
					<view class="label">Flex:</view>
					<input v-model="flex" type="number" class="input " />
				</view>
						
			</view> -->
		</view>

		<view class="wrap-y" style="width:50vw;">
			<view
				style="position: absolute;right: 150rpx;background-color: orange;color: white;border-radius: 8rpx;"
				@click="add">添加元素</view>
			<view class="title">布局效果预览区</view>
			<view class="dashed" style="width: 90%;height: 750px;margin-top: 20rpx;overflow-x: scroll;background-color: #eee;" :style="{flexDirection:flex_direction,flexWrap:flex_wrap,
				justifyContent:justify_content,
				alignItems:align_items,
				alignContent:align_content,alignSelf:align_self,display:isFlex?'flex':'block'
				}">
				<view v-for="item,index in list" :style="{width:width+'%',height:height+'px',background: bgColor, flex:item.flex,order:item.order
				}" style="position: relative;">
					<view style="position: absolute;right: 10rpx;top: 10rpx;font-size: 36rpx;" @click="remove(index)"
						class="cuIcon-close" />
					<view style="position: absolute;top: 40%;left: 50%;">{{item.index}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'project3',
		props: {},
		data() {
			return {
				list: [{
					index: 1,
					flex: '',
					order: 1
				}],
				position: 'static',
				overflow: 'visible',
				zindex: 0,
				bgColor: '#34daaa',
				borderColor: '#ff5500',
				width: 10,
				height: 100,
				margin: 0,
				padding: 0,
				border: 0,
				border_radiu: 0,
				box_shadow1: 0,
				box_shadow2: 0,
				box_shadow3: 0,
				box_shadow4: '#000000',
				box_shadow5: 0,
				right: 0,
				left: 0,
				bottom: 0,
				top: 0,
				flex_direction: "row",
				flex_wrap: "nowrap",
				justify_content: "flex-start",
				align_items: "flex-start",
				align_content: "flex-start",
				align_self: "",
				isFlex: false
			}
		},
		methods: {
			changeFlexDirection(value) {
				this.flex_direction = value.detail.value;
			},
			changeflexWrap(value) {
				this.flex_wrap = value.detail.value;
			},
			changeJustify(value) {
				this.justify_content = value.detail.value;
			},
			changeAlignItems(value) {
				this.align_items = value.detail.value;
			},
			changeAlignContent(value) {
				this.align_content = value.detail.value;
			},
			changeAlignSelf(value) {
				this.align_self = value.detail.value;
			},
			add() {
				let obj = {
					index: this.list[this.list.length - 1].index + 1,
					flex: '',
					order: 1
				}
				this.list.push(obj)
			},
			remove(index) {
				this.list.splice(index, 1)
			},
			changeWidth(event) {
				this.width = event.detail.value;
			},
			changeFlex(event) {
				this.isFlex = event.detail.value
			}
		}
	}
</script>

<style lang="scss">
	radio {
		margin-bottom: 6px;
	}

	.title {
		font-weight: 600;
		color: red;
		font-size: 40rpx;
		text-align: center;
	}

	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 30rpx;

		.label {
			font-size: 30rpx;
			color: black;
			margin-right: 20rpx;
		}

		.input {
			font-size: 30rpx;
			color: black;
			width: 80px;
			border: 1rpx solid #eee;
			padding: 8rpx 10rpx;
		}
	}
</style>